const app = document.querySelector("#app");
let currentDom;

app.ondragstart = (e) => {
  e.dataTransfer.effectAllowed = e.target.dataset.effect;
  currentDom = e.target;
};

app.ondragover = (e) => {
  e.preventDefault();
};

/**
 * 清除样式
 */
const clearGrayBg = () => {
  document.querySelectorAll("[data-over]").forEach((item) => {
    item.classList.remove("gray-bg");
  });
};

const getCanOverDom = (node) => {
  while (true) {
    if (!node) {
      return;
    }

    if (node.dataset && node.dataset.over) {
      return node;
    }
    node = node.parentElement;
  }
};
app.ondragenter = (e) => {
  const target = getCanOverDom(e.target);
  if (target && target.dataset.over === e.dataTransfer.effectAllowed) {
    clearGrayBg();
    target.classList.add("gray-bg");
  }
};

app.ondrop = (e) => {
  clearGrayBg();
  const target = e.target;

  if (target.dataset.over !== e.dataTransfer.effectAllowed) {
    return;
  }

  if (e.dataTransfer.effectAllowed === "copy") {
    target.innerHTML = "";
    const copyNode = currentDom.cloneNode(true);
    copyNode.dataset.effect = "move";
    target.appendChild(copyNode);
  } else {
    currentDom.remove();
  }
};
